<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
        <a-form-model ref="form" :model="model"  :rules="validatorRules">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="数据限制" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isLimit">
              <div class="item-wrap">
                <a-tooltip
                    placement="top"
                    title="点击 “是” 时在弹窗处输入推送限制的条数"
                    style="margin-right:10px;margin-top:2px;"
                  >
                    <a-icon type="question-circle" />
                  </a-tooltip>
                  <a-radio-group v-model="model.isLimit">
                    <a-radio :value="'1'">是</a-radio>
                    <a-radio :value="'0'">否</a-radio>
                  </a-radio-group>
              </div>
            </a-form-model-item>
          </a-col>
          
          <a-col :span="24" :push="5" >
            <a-form-model-item v-if="model.isLimit=='1'" label="" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="number">
              <a-input-number v-model="model.number" :formatter="limitDecimals" :parser="limitDecimals" placeholder="输入限制该租户每日推送条数" :min="1"  style="width:50%"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
   </j-modal>
</template>

<script>
import JFormContainer from '@/components/jeecg/JFormContainer'

const limitDecimals = value => {
  return value.replace(/^(0+)|[^\d]+/g,'')
}
  export default {
    name: "TenantDataConfigModal",
    components: {
      JFormContainer
    },
    data () {
      return {
        title:'',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        width:800,
        visible: false,
        disableSubmit: false,
        confirmLoading:false,
        model: {isLimit:'0'},
        id:'',
        validatorRules: {
          isLimit:[ { required: true, message: '请选择数据限制!' }],
          number:[ { required: true, message: '请输入推送条数!' }],
        },
        limitDecimals:limitDecimals
      }
    },
    async created(){
    },
    methods: {
      edit (record) {
        this.visible=true
        this.id = record?record.id:'';
       },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
       this.$refs.form.validate(valid => {
          if (valid) {
            // that.confirmLoading = true;
            console.log("form",this.model);
          }

        })
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
    }
  }
</script>
<style lang="less" scoped>
  .item-wrap{
    display: flex;
    align-items: center;
    // justify-content: center;
    margin-top: 9px;
    /deep/.ant-btn:hover, .ant-btn:focus {
        // color: #fff;
        // background-color: #fff;
        // border-color: #fff;
        margin-top:0
    }
  }
  .btn-select{
    border-radius: 0px;
    color: #40a9ff;
    background-color: #fff;
    border-color: #40a9ff;
  }
  .btn-unselect{
    border-radius: 0px;
    color: rgba(0, 0, 0, 0.65);
    background-color: #fff;
    border-color: #d9d9d9;
  }
  .btn-space{
    margin-right: 10px;
  }
</style>